// // 三个请求
// import { login, logout, getInfo } from '@/api/user'
// // web存储（就像本地存储似的），关于存储的三个对token的操作
// import { getToken, setToken, removeToken } from '@/utils/auth'
// // 引入了一个路由
// import { resetRouter } from '@/router'

// const getDefaultState = () => {
//   return {
//     token: getToken(),
//     name: '',
//     avatar: ''
//   }
// }

// const state = getDefaultState()

// const mutations = {
//   RESET_STATE: (state) => {
//     Object.assign(state, getDefaultState())
//   },
//   SET_TOKEN: (state, token) => {
//     state.token = token
//   },
//   SET_NAME: (state, name) => {
//     state.name = name
//   },
//   SET_AVATAR: (state, avatar) => {
//     state.avatar = avatar
//   }
// }

// const actions = {
//   // user login
//   login({ commit }, userInfo) {
//     const { username, password } = userInfo
//     return new Promise((resolve, reject) => {
//       login({ username: username.trim(), password: password }).then(response => {
//         const { data } = response
//         commit('SET_TOKEN', data.token)
//         setToken(data.token)
//         resolve()
//       }).catch(error => {
//         reject(error)
//       })
//     })
//   },

//   // get user info
//   getInfo({ commit, state }) {
//     return new Promise((resolve, reject) => {
//       getInfo(state.token).then(response => {
//         const { data } = response

//         if (!data) {
//           return reject('Verification failed, please Login again.')
//         }

//         const { name, avatar } = data

//         commit('SET_NAME', name)
//         commit('SET_AVATAR', avatar)
//         resolve(data)
//       }).catch(error => {
//         reject(error)
//       })
//     })
//   },

//   // user logout
//   logout({ commit, state }) {
//     return new Promise((resolve, reject) => {
//       logout(state.token).then(() => {
//         removeToken() // must remove  token  first
//         resetRouter()
//         commit('RESET_STATE')
//         resolve()
//       }).catch(error => {
//         reject(error)
//       })
//     })
//   },

//   // remove token
//   resetToken({ commit }) {
//     return new Promise(resolve => {
//       removeToken() // must remove  token  first
//       commit('RESET_STATE')
//       resolve()
//     })
//   }
// }

// export default {
//   namespaced: true,
//   state,
//   mutations,
//   actions
// }

// 登录的时候用的
import { login, getUser, getUserBaseInfo } from '@/api/user'
import { resetRouter } from '@/router'
import { getToken, setToken, removeToken } from '@/utils/auth'
// import { Promise } from 'core-js'

const state = {
  // 如果我们对本地缓存只引入了setToken，那么就会造成一个问题的出现，那就是当我们进入页面的时候，我们的vuex里的token是空，还没来的急保存到vuex中呢（vuex是刷新页面就会丢失数据），所以我们可以先从本地存储将存在那里的token得到设置给vuex中的token，如果是第一次进入网页，因为本地缓存也没有数据保存，那就将vuex里的token设置为空
  token: getToken() || '',
  // 用户的基本信息
  userInfo: {}
}
const mutations = {
  // 1.设置token，保存到vuex中
  setToken(state, newToken) {
    // 下面一行代码是将token存到vuex
    state.token = newToken
    // 下面一行代码是将token存到本地缓存中去
    setToken(newToken)
  },
  // 2.设置用户信息，将用户信息保存到vuex中
  setUserInfo(state, newUserInfo) {
    state.userInfo = newUserInfo
  },
  // 3.清除token
  removeTokenMut(state) {
    // 清除vuex中token
    state.token = ''
    // 清除本地缓存中token
    removeToken()
  },
  // 4.清除用户信息
  removeUserInfo(state) {
    state.userInfo = ''
  }
}
const actions = {
  // 我们对请求token的方法进行一个封装，让它返回一个promise对象
  // getToken(context, data) {
  //   // promise((成功回调函数，失败回调函数)=>{})
  //   // promise对象自带.then().catch()方法
  //   return new Promise((resolve, reject) => {
  //     // console.log(context)
  //     // 当我们请求成功时
  //     login(data)
  //       // 调用login()的   .then()方法
  //       // 注意：此处的.then()是login()的不是promise()的
  //       .then((res) => {
  //         // console.log(res)
  //         // 当请求成功后我们就可以调用promise()的成功回调函数，此处必须写，因为只有写了我们才能调用promise()的.then()方法，因为promise()的.then()方法就是由它的成功回调函数提供的
  //         resolve()
  //         context.commit('setToken', res.data)
  //       })
  //       .catch((err) => {
  //         // 此处是请求失败的操作，同成功一样的讲解
  //         reject()
  //         console.log(err)
  //       })
  //   })
  // },

  // 下面我们封装一下获取token的函数。
  // 新知识点：使用async await 来封装优化promise()
  // async 函数执行的结果，默认就是一个promise()对象。
  async getToken({ commit }, obj) {
    const { data } = await login(obj)
    commit('setToken', data)
    // 不管外面是否使用，我们都要进行返回结果
    return data
  },

  // 新知识点：使用async await 来封装优化promise()
  // async 函数执行的结果，默认就是一个promise()对象。
  async getUserInfo({ commit }) {
    const { data: user } = await getUser()
    // console.log(data)
    // 获取完用户信息之后，我们发现这个用户信息里面没有用户头像，那就要寻找其他接口来获取用户头像
    const { data: userBase } = await getUserBaseInfo(user.userId)
    // console.log(userBase)
    // 将两个接口请求回来的数据合并并存到vuex的userInfo中
    // 方法是扩展运算符
    const obj = {
      ...user,
      ...userBase
    }
    // 然后就是我们发现图片这个可能会在多个地方使用，所以就把它在全局的getters保存了一下，方便后期使用
    commit('setUserInfo', obj)
    // 这样封装之后，我们发现页面上没有显示铺设数据，这是怎么回事？
    // 原来是因为，我们使用promise的时候，我们请求成功之后调用了成功回调函数resolve()，给返回了数据
    // 但是我们封装优化使用async的时候，我们没有给他返回值，这就要我们手动返回一下数据了。
    return obj
  },
  // getUserInfo({ commit }) {
  //   return new Promise((resolve, reject) => {
  //     getUser()
  //       .then((res) => {
  //         const { data } = res
  //         commit('setUserInfo', data)
  //         resolve(res)
  //       })
  //       .catch((err) => {
  //         console.log(err)
  //         reject(err)
  //       })
  //   })
  // }

  // 将退出登录所需要的操作全部封装到actions里，目的是减少在组件退出登录的点击事件所需要的代码，也是为了让这些操作可以放在别的地方使用，提高代码的复用性。
  logout(context) {
    context.commit('removeTokenMut')
    context.commit('removeUserInfo')
    // 退出重置vuex中的路由表,{ root: true }--因为是调用的别的模块的方法，所以要加上{ root: true }
    context.commit('routesInfo/setRoutes', [], { root: true })
    // 重置router里的routes
    resetRouter()
    // 重置主题颜色
    context.commit('settings/resetThemeColor', null, { root: true })
  }
}
const getters = {}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
